<script setup lang="ts">
import { computed, defineAsyncComponent, markRaw } from "vue";
import { EsConfigProvider, useLanguage, useTheme } from '../packages';
// 使用 ES 模块语法动态导入组件
const componentList = markRaw<any>([]);

// 获取所有示例组件
const exampleModules = import.meta.glob('./exampleTest/*.vue');

// 动态加载所有组件
Object.entries(exampleModules).forEach(([path, loader]) => {
  const component = defineAsyncComponent(loader as any);
  componentList.push({
    name: path.replace('./exampleTest/', '').replace('.vue', ''),
    com: component
  });
});

// 使用主题管理
const { themeConfig, toggleTheme, isDark, setCustomTokens } = useTheme();
// 使用语言管理
const { locale, toggleLanguage, isZhCN } = useLanguage();
//自定义样式
setCustomTokens({ colorPrimary: '#FBC428' });

// 根据主题计算样式
const appStyle = computed(() => ({
  background: isDark.value ? '#25262A' : '#F5F5F5',
  color: isDark.value ? '#fff' : '#303133',
}));

const toggleStyle = computed(() => ({
  backgroundColor: isDark.value ? '#2C2C2E' : '#FFFFFF',
  color: isDark.value ? '#fff' : '#606266',
  borderColor: isDark.value ? '#3F3F40' : '#DCDFE6',
  boxShadow: isDark.value ? '0 2px 8px rgba(0, 0, 0, 0.3)' : '0 2px 8px rgba(0, 0, 0, 0.1)',
}));

</script>

<template>
  <es-config-provider :theme="themeConfig" :locale="locale">
    <div class="es-app" :style="appStyle">
      <div class="toolbar">
        <button class="theme-toggle" :style="toggleStyle" @click="toggleTheme">
          {{ isDark ? '🌙 暗色' : '☀️ 亮色' }}
        </button>
        <button class="language-toggle" :style="toggleStyle" @click="toggleLanguage">
          {{ isZhCN ? '🇨🇳 中文' : '🇺🇸 English' }}
        </button>
      </div>
      <div class="app-header">
        <h1>EarthSDK UI 组件测试</h1>
      </div>
      <template v-for="item in componentList" :key="item.name">
        <hr>
        <h2>{{ item.name }}</h2>
        <component :is="item.com"></component>
      </template>
    </div>
  </es-config-provider>
</template>

<style>
.es-app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  transition: background-color 0.3s, color 0.3s;
}

.app-header {
  padding: 20px;
  margin-bottom: 20px;
}

.app-header h1 {
  margin: 0;
}

.toolbar {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.theme-toggle,
.language-toggle {
  padding: 8px 16px;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.theme-toggle:hover,
.language-toggle:hover {
  background-color: #3A76E5 !important;
  color: #FFFFFF !important;
  border-color: #3A76E5 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(58, 118, 229, 0.4) !important;
}

html,
body {
  transition: background-color 0.3s;
}
</style>
